#app {}

div {
  padding: 30px;
  font-size: 18px;
  color: #eee;
}

/* 
  @keyframes	规定动画。	

  animation	所有动画属性的简写属性，除了 animation-play-state 属性。	
  animation-name	规定 @keyframes 动画的名称。	
  animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	
  animation-timing-function	规定动画的速度曲线。默认是 "ease"。	
  animation-delay	规定动画何时开始。默认是 0。	
  animation-iteration-count	规定动画被播放的次数。默认是 1。	
  animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	
                ------“动画播放顺序， 从0还是从100开始”
  animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

*/


@keyframes changeColor {
  from {
    color: red;
  }
  to {
    color: yellow;
  }
}

/* 动画 */
.animation-box {
  animation: changeColor 3s ease-in-out infinite reverse;

}
